<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>住户列表</title>

    <link rel="stylesheet" href="../../resource/css/bootstrap.min.css" th:href="@{/resource/css/bootstrap.min.css}">

    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">

    <!-- Morris -->
    <link href="../../resource/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">

    <link href="../../resource/css/animate.min.css" th:href="@{/resource/css/animate.min.css}" rel="stylesheet">

    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">

    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>

    <link href="../../resource/hotui/css/switchery.min.css"
          th:href="@{/resource/hotui/css/switchery.min.css}" rel="stylesheet"/>

    <link href="../../resource/lib/bootstrap-daterangepicker/daterangepicker.min.css"
          th:href="@{/resource/lib/bootstrap-daterangepicker/daterangepicker.min.css}" rel="stylesheet">

    <link href="../../resource/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css"
          th:href="@{/resource/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" rel="stylesheet"/>

    <link href="../../resource/hotui/css/awesome-bootstrap-checkbox.min.css" th:href="@{/resource/hotui/css/awesome-bootstrap-checkbox.min.css}"
          rel="stylesheet">

    <style type="text/css">
        .hr-line-dashed {
            margin: 10px 0;
            height: 1px;
            border-top: 1px dashed #e7eaec;
            background-color: #fff;
            color: #fff;
        }

        .city-picker-selector select {

        }

        .nav-tabs input {
            width: 20px;
            height: 23px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight tooltip-demo">

    <!--list-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins m-b-none">
                <div class="tabs-container">
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <table class="table table-bordered table-hover table-center">
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <!--<th>楼号-房间号</th>-->
                                    <th>楼层</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="userContent">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/html" id="user_content_template">
    <tr>
        <td>{{username}}</td>
        <!--<td>{{room}}</td>-->
        <td>{{address}}</td>
        <td>
            <button onclick="Handler.locator({{userId}})"
                    type="button"
                    class="btn btn-info btn-xs m-b-none">定位
            </button>
        </td>
    </tr>
</script>

<!--基础框架js-->
<script src="../../resource/js/jquery.min.js" th:src="@{/resource/js/jquery.min.js?20190316}"></script>
<script src="../../resource/js/bootstrap.min.js" th:src="@{/resource/js/bootstrap.min.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script src="../../resource/hotui/js/plugins/datetimepick/js/moment.min.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/moment.min.js}" ></script>
<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>

<script src="../../resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
<script src="../../resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js}"></script>

<script src="../../resource/js/switchery.min.js" th:src="@{/resource/js/switchery.min.js}"></script>

<script src="../../resource/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/resource/js/plugins/validate/jquery.validate.min.js}" ></script>

<script src="../../resource/js/plugins/validate/messages_zh.min.js"
        th:src="@{/resource/js/plugins/validate/messages_zh.min.js}"></script>

<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-validate.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-validate.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const mapBase = /*[[@{/map}]]*/  "/map";
</script>

<script>
    $(function () {
        var strId = '[[${strId}]]';
        Handler.getData(strId);
    });

    var Handler = {
        //展示当前地图的人员信息
        getData: function (id) {
            hot.ajax(mapBase + "/location/msg/str", {strId: id}, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    let list = apiResult.data;
                    let appendHtml = "";
                    $.each(list, function (o, item) {
                        let tempHtml = $("#user_content_template").html();
                        tempHtml = tempHtml.replace('{{username}}', item.realName);
//                        tempHtml = tempHtml.replace('{{room}}', "1");
                        tempHtml = tempHtml.replace('{{address}}', item.address);
                        tempHtml = tempHtml.replace('{{userId}}', item.userId);
                        appendHtml += tempHtml;
                    });
                    $("#userContent").html(appendHtml);
                }
            }, function () {
            }, "post");
        },
        locator: function (userId) {
            parent.treeHandler.timerLocation(userId, 1);
            var href = parent.document.getElementsByClassName("layui-layer-close1");
            href[0].click()
        }
    }
</script>
</body>
</html>
